<template>
  <div class="wrap">
    <div class="content-list" :hidden="!isShow">
      <div ref="myTable" style="height: 100%; overflow: hidden; background: transparent">
        <table>
          <tr v-for="(item, index) in listData" :key="index">
            <td width="20%">{{ formatDict(item, { property: 'unitCode' }, item.unitCode) }}</td>
            <td>{{ item.workName }}</td>
            <td width="10%">{{ formatDict(item, { property: 'sklId' }, item.sklId) }}</td>
          </tr>
        </table>
      </div>
    </div>

    <div :style="{ width: '100%', height: '100%' }" :hidden="isShow">
      <LakerEcharts ref="omoRegularRef" :option="dataOption" width="100%" height="100%" />
    </div>
  </div>
</template>
<script>
import isepApp from '@/api/isep'
import LakerEcharts from '@/components/lakerEcharts/index.vue'
import * as echarts from 'echarts'

export default {
  name: 'OmoRegulartask',
  components: { LakerEcharts },
  data() {
    return {
      listData: [],
      timer: {},
      isShow: true,
      dictData: {
        unitCode: [
          { value: '01', label: '#1机组' },
          { value: '02', label: '#2机组' },
          { value: '00', label: '全厂公用' }
        ],
        sklId: [
          { label: '电气', value: '1', num: 0 },
          { label: '化学', value: '3', num: 0 },
          { label: '汽机', value: '4', num: 0 },
          { label: '锅炉', value: '5', num: 0 },
          { label: '热控', value: '6', num: 0 },
          { label: '燃运', value: '7', num: 0 },
          { label: '灰硫', value: '9', num: 0 },
          { label: '土建', value: '10', num: 0 },
          { label: '金属', value: '11', num: 0 },
          { label: '环保', value: '12', num: 0 },
          { label: '节能', value: '14', num: 0 },
          { label: '综合', value: '15', num: 0 },
          { label: '信息安全', value: '16', num: 0 },
          { label: '安全', value: '17', num: 0 }
        ]
      },
      dataOption: {
        backgroundColor: '',
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          name: '万吨',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#363e83'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#363e83 '
            }
          },
          axisLabel: {
            color: '#fff',
            fontWeight: 'normal',
            fontSize: '12'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#363e83'
              }
            },
            axisLabel: {
              inside: false,
              rotate: 20,
              color: '#fff',
              fontWeight: 'normal',
              fontSize: '10'
            },
            data: ['职工', '外委', '访客']
          }
        ],
        series: [
          {
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: 'greenyellow',
              fontWeight: 'normal',
              fontSize: '12'
            },
            isShow: true,
            itemStyle: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(46,200,207,1)'
                },
                {
                  offset: 1,
                  color: 'greenyellow'
                }
              ]),
              borderRadius: 50,
              borderWidth: 0
            },
            barWidth: '15',
            data: [8, 15, 10]
          }
        ]
      }
    }
  },
  mounted() {
    this.initLoadData()
    let speed = 60000
    const self = this
    let theNowTime = function () {
      self.initLoadData()
    }
    setInterval(theNowTime, speed)
    this.createScroll()
  },
  unmounted() {
    this.clearScroll()
  },
  methods: {
    rowClass({ row }) {
      return row.inAndOutType === 1 ? 'color: greenyellow' : 'color: greenyellow'
    },
    clearScroll() {
      clearInterval(this.timer)
      this.timer = null
    },
    createScroll() {
      this.clearScroll()
      // 拿到可以滚动的元素
      const tableWrapper = this.$refs.myTable

      this.timer = setInterval(() => {
        tableWrapper.scrollTop += 1
        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
        if (tableWrapper.clientHeight + tableWrapper.scrollTop + 1 >= tableWrapper.scrollHeight) {
          tableWrapper.scrollTop = 0
        }
      }, 50)
    },
    subString2(str) {
      str = str + '000'
      return str.substring(11, 19)
    },
    initLoadData() {
      isepApp.getCurrentShiftTask().then((res) => {
        if (res.code === 200) {
          this.listData = res.data.filter((item) => item.validSta === '00')
          if (this.listData.length < 1) {
            this.isShow = false
            let serdata = []
            let serTitle = []
            let tempSkl = []
            for (let i = 0; i < res.data.length; i++) {
              for (let j = 0; j < this.dictData.sklId.length; j++) {
                if (res.data[i]['sklId'] === this.dictData.sklId[j].value) {
                  this.dictData.sklId[j].num++
                }
              }
            }

            tempSkl = this.dictData.sklId.filter((item) => item.num > 0)

            serTitle = tempSkl.map((item) => {
              return item.label
            })
            serdata = tempSkl.map((item) => {
              return item.num
            })

            console.log(serdata)
            this.dataOption = {
              xAxis: [{ data: serTitle }],
              series: [
                {
                  data: serdata
                }
              ]
            }
          } else {
            this.isShow = true
          }
        }
      })
    },
    formatDict(row, column, cellValue) {
      const dictList = this.dictData[column.property]
      let label = cellValue
      if (dictList) {
        dictList.forEach((element) => {
          if (element.value == cellValue) {
            label = element.label
          }
        })
      }
      return label
    }
  }
}
</script>

<style scoped lang="scss">
.el-table {
  --el-table-border-color: transparent;
  --el-table-border: none;
  --el-table-text-color: greenyellow;
  --el-table-header-text-color: #bdbdbe;
  --el-table-row-hover-bg-color: transparent;
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}

.wrap {
  width: 100%;
  height: 100%;
  padding: 10px 0 0 0;
}

.moudle-title {
  color: #50e9ff;
  font-size: 16px;
  text-align: center;
}

.content-list {
  padding: 0 5px;
  height: calc(100% - 10px);
  color: #147dcf;
  font-size: 12px;

  .content-item {
    display: flex;
    margin-top: 5px;
    justify-content: space-between;
  }
}

.temper-scroll {
  height: 230px;
  width: 380px;
  margin: 30px auto;
  overflow: hidden;
  .scroll-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 15px;
    color: #147dcf;
  }
}

.incss {
  color: greenyellow;
}

.outcss {
  color: #147dcf;
}

table,
table td {
  border-collapse: collapse;
  border: 1px solid rgb(202, 224, 255, 0.2);
}
table {
  width: 100%;
  margin-top: 5px;
}
table td {
  padding: 2px 3px;
  font-size: 10px;
  font-weight: normal;
  text-align: center;
  word-break: break-all;
  color: #dcdfe6;
}
</style>
